<template>
  <el-dialog
    title="项目结果公示"
    :visible.sync="dialogVisible"
    width="60%"
    custom-class="search-result-pop"
    :before-close="handleClose"
  >
    <div v-if="dialogVisible" style="margin-bottom: 30px">
      <FormGroup ref="formParams" style="margin-top: 20px" :search-config="addColumnConfig" label-width="120px" label-position="right" />
      <UnloadFileTable v-model="annexList" style="width: 80%;padding-left: 120px;" />
    </div>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import FormGroup from '@/views/components/FormGroup'
import { addColumnConfig } from '../initData'
import { updateResult, createResult, projectSelectList, getResultDetail } from './../api'
import EditorCom from '@/components/Editor/newEdit.vue'
import FileUpload from '@/components/FileUpload'
import UnloadFileTable from '@/views/projectManageCompany/projectResultShow/components/unloadFileTable.vue'
export default {
  name: 'AddPop',
  components: {
    FormGroup,
    EditorCom,
    FileUpload,
    UnloadFileTable
  },
  data() {
    return {
      dialogVisible: false,
      addColumnConfig: JSON.parse(JSON.stringify(addColumnConfig)),
      row: {},
      popType: '',
      annexList: []
    }
  },
  methods: {
    async getSelectList() {
      const { data, code } = await projectSelectList()
      if (code === 0 && data && data.length > 0) {
        return data.map(v => {
          return {
            label: v.title,
            value: v.id
          }
        })
      }
      return []
    },
    async getResultDetail(id) {
      const { data, code } = await getResultDetail({ id })
      if (code === 0) {
        return data
      }
      return null
    },
    async open({ popType, row = {}}) {
      this.dialogVisible = true
      this.popType = popType
      const selectList = await this.getSelectList()
      const newConfig = JSON.parse(JSON.stringify(addColumnConfig))
      if (popType === 'edit') {
        this.row = row
        const editData = await this.getResultDetail(row.id)
        this.annexList = editData.annexList || []
        const keys = Object.keys(editData)
        keys.forEach((v) => {
          newConfig.forEach(ele => {
            if (ele.keyIndex === v) {
              if (ele.keyIndex === 'projectId') {
                ele.value = editData['projectId']
              } else {
                ele.value = editData[v]
              }
            }
            if (ele.keyIndex === 'projectId') {
              ele.options = selectList
              ele.disabled = true
            }
          })
        })
      } else {
        newConfig.forEach(ele => {
          if (ele.keyIndex === 'projectId') {
            ele.options = selectList
          }
        })
      }
      this.addColumnConfig = newConfig
      this.$refs.formParams && this.$refs.formParams.resetFields()
    },
    handleClose() {
      this.dialogVisible = false
      this.addColumnConfig = JSON.parse(JSON.stringify(addColumnConfig))
    },
    async handleConfirm() {
      try {
        const fromParams = this.$refs.formParams && await this.$refs.formParams.getParams()
        this[this.popType](fromParams)
      } catch (e) {}
    },
    async add(fromParams) {
      const { code, msg } = await createResult({
        ...fromParams,
        id: this.row.id,
        'annexList': this.annexList
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.$message.success('新增成功')
      this.$emit('success')
      this.handleClose()
    },
    async edit(fromParams) {
      const { code, msg } = await updateResult({
        ...fromParams,
        id: this.row.id,
        'annexList': this.annexList
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.$message.success('编辑成功')
      this.$emit('success')
      this.handleClose()
    }
  }
}
</script>

<style lang='scss'>
    .search-result-pop {
        .el-drawer__body {
            padding: 15px 20px;
        }
        .basic-infos {

            .title {
                padding: 3px 10px;
                border-left: 2px solid rgb(20, 165, 232);
                margin-bottom: 20px;
            }
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: flex-end;
    }
</style>
